<template>
    
    <div class="person">
        <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
        <h1>温度：{{ temp }}</h1>
        <h1>高度：{{ height }}</h1>
        <button @click="changTemp">温度增加</button>
        <button @click="changHeight">高度增加</button>
    </div>
</template>

<script setup name="Person" lang="ts">
    import { ref,watch,watchEffect } from 'vue';
    //温度
    let temp=ref(0);
    //高度
    let height=ref(0);

    function changTemp(){
        temp.value+=10;
    }
    function changHeight(){
        height.value+=1;
    }
    /*
        watch对比watchEffect:
            1、都能监听响应式数据的变化，不同的是监听数据变化的方式不同
            2、watch：要明确指出监视的数据
            3、watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
    */

    // watch([temp,height],(value)=>{
    //     //从value中获取最新的temp值和height值
    //     const [nTemp,nHeight]=value;
    //     //温度到50、高度到20 就联系服务器
    //     if(nTemp>=50||nHeight>=20){
    //         console.log("联系服务器");
    //     }
    // })

    const stopWatchEffect=watchEffect(()=>{
        if(temp.value>=50||height.value>=20){
            console.log("联系服务器");
        }
        if(temp.value>=100||height.value>=50){
            console.log("清理....");
            stopWatchEffect();
        }
    })
    

</script>

<style scoped>
    .person{
        background-color:aquamarine;    /*背景颜色 */
        padding: 30px; /*内边距 */
        box-shadow: 0 0 10px; /*边框阴影 */
        border-radius: 10px;
    }
</style>

